import React from 'react'

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    // IndexRouter
} from "react-router-dom"
import logo from './logo.svg';

import './App.scss';

import Home from "./pages/Home";
import Login from "./pages/Login";
import Backend from "./pages/Backend";
import Admin from "./pages/Admin";
import Test02 from "./pages/Test02";
import SorList from "./pages/SortList"
import Forms from "./pages/Forms"
import MyTab from "./pages/MyTabs";
import Markdown from "./pages/Markdown";
import Game from "./pages/Game";


const Index = () => (
    // <div className="index">
    //     <div className="navs">
    //         <Link to="/updown">列表</Link>
    //         <Link to="/tabs">Tab切换</Link>
    //         <Link to="/forms">表单</Link>
    //         <Link to="/markdown">Markdown编辑器</Link>
    //     </div>
    // </div>
    <ul className="my-link-list">
        <li><Link to="/">首页</Link></li>
        <li><Link to="/backend">后端</Link></li>
        <li><Link to="/login">登录</Link></li>
        <li><Link to="/admin">管理</Link></li>
        <li><Link to="/test02">test02</Link></li>
        <li><Link to="/sortList">sortList</Link></li>
        <li><Link to="/forms">forms</Link></li>
        <li><Link to="/myTab">myTab</Link></li>
        <li><Link to="/markdown">markdown</Link></li>
        <li><Link to="/game">game</Link></li>
    </ul>
);

function App() {
    return (
        <div>

            <Router>
                <Index/>
                <div className="my-show-router">
                    <Route path="/" exact component={Index}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/backend" component={Backend}/>
                    <Route path="/admin" component={Admin}/>
                    <Route path="/test02" component={Test02}/>
                    <Route path="/sortList" component={SorList}/>
                    <Route path="/forms" component={Forms}/>
                    <Route path="/myTab" component={MyTab}/>
                    <Route path="/markdown" component={Markdown}/>
                    <Route path="/game" component={Game}/>
                </div>
            </Router>
        </div>
    );
}

export default App;


// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }
//
// export default App;
